<template>
    <!-- 景区地图 -->
    <div class="head-div" style="width: 56%;">
        <div class="head-left">
            <img src="../assets//tpleft.svg" alt="" @click="previous" />
            <div></div>
            <img src="../assets/tpright.svg" alt="" @click="homes" />
        </div>
        <div class="head-text">景区地图</div>
    </div>
    <van-tabs v-model:active="active" shrink>
        <!-- <van-tab></van-tab> -->
        <van-tab v-for="item in tab" :title="item.name"></van-tab>
    </van-tabs>
    <div id="container"></div>

</template>
<script setup>
const onClickLeft = () => history.back();//返回上一级
import axios from 'axios';
// import { TabbarItem } from 'vant';
import { Tab, Tabs } from 'vant';
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import AMapLoader from "@amap/amap-jsapi-loader";
const route = useRoute();
console.log(route.query.id);
import { useRouter } from 'vue-router';
const router = useRouter();
const list = ref([])//景区分类数据
const active = ref(-1)
let status = false
let map = null
let A_map = null
// 景区标识
const tab = ref([])
let back = () => {
    router.go(-1)
}

// 景区详情
watch(active, () => {
    // let id = active.value
    console.log(tab.value[active.value].id);
    let id = tab.value[active.value].id
    let img = tab.value[active.value].minimg;
    axios({
        url: '/app/map/index',
        method: 'post',
        data: {
            map_id: id
        }
    }).then(res => {
        console.log(res, '景区详情');
        // let list = []
        // if (id == 1) {
        list.value = res.data.data
        // } else {
        //     list.value = res.data.tab
        // }
        if (status) {
            map.clearMap();
        }
        // list_array.value = list.value 
        console.log(list.value);
        list.value.forEach(item => {
            const content = `<div class="custom-content-marker">
                                    <div>${item.name}</div>
                                    <img src="https://wwz.jingyi.icu${item.identifying}">
                             </div>`;
            const marker = new A_map.Marker({
                content: content, //自定义点标记覆盖物内容
                position: [item.lng * 1, item.lat * 1], //基点位置
                offset: new A_map.Pixel(-13, -30), //相对于基点的偏移位置
            });
            var position = new AMap.LngLat(list.value[0].lng * 1, list.value[0].lat * 1); //传入经纬度
            map.setCenter(position); //简写 设置地图中心点

            map.add(marker);
        });

        console.log(list.value, '1');
        status = true
    })
})
const list_array = ref([])
const list_id = ref("")
// 地图
onMounted(() => {
    console.log(1234);
    AMapLoader.load({
        key: "13039019de0ea5a40c6467d08631fa4e", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            A_map = AMap
            map = new A_map.Map("container", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 11, // 初始化地图级别
                center: [116.397428, 39.90923], // 初始化地图中心点位置
            });
            console.log(route.query.id);
            axios({
                url: '/app/maps/index',
                method: 'post',
                data: {
                    scenic_id: route.query.id
                }
            }).then(res => {
                console.log(res.data, '景区分类')
                list_id.value = res.data.data.id
                list_array.value = res.data
                tab.value = res.data.data
                active.value = 0
            })
        })
        .catch((e) => {
            console.log(e);
        });

});
onUnmounted(() => {
    map?.destroy();
});
// 返回到首页
const previous = () => {
    router.push({
        name: "home",
    });
}
const homes = () => {
    router.push({
        name: "homes",
    });
}
</script>

<style>
.head-left div {
    background-color: rgba(153, 153, 153, 1);
    width: 1px;
    height: 2.5vh;
}

.head {
    width: 100%;
    background-color: white;
    padding-bottom: 6.5px;
    padding-top: 6.5px;
    height: 28px;
    z-index: 12;
}

.head-text {
    font-size: 15px;
    color: rgba(80, 80, 80, 1);
}

.head-left img {
    width: 3vh;
    height: 3vh;
}

.head-left {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 3vh;
    height: 32px;
    width: 10vh;
    border: 1px solid #e2e2e2;
}

.head-div {
    padding-left: 2vh;
    width: 51%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 800px;
}

.custom-content-marker img {
    width: 50px;
    height: 50px;
}

.custom-content-marker div {
    width: 50px;
    line-height: 30px;
    text-align: center;
    background-color: #ffffff;
}
</style>